<template>
  <div>
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    <table>
      <tr> <th> 苹果 {{price}}￥/斤，折扣 《{{discount}}折》</th></tr>
      <tr>
        <td>请输入你要购买的斤数<input type="number" v-model="num"></td>
      </tr>
      <tr>
        <td><button>结账买单~</button></td>
      </tr>
      <tr>
       <td> 结账单：总价:{{price * num}}元,折后价:{{price * num*discount/10}}元,省了；{{price * num*(10 - discount)/10}}元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'VueDemoApp',

  data() {
    return {
      num:0,
      price:10,
      discount:8
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style >
div{
  text-align: center;
  width: 800px;
  margin:  0 auto;
}
  table{
    border: 1px solid #000;
    border-collapse: collapse;
    text-align: center;
    width: 800px;
  }
  tr{
    border: 1px solid #000;
  }
</style>
